<template>
  <el-container class="h-100 p-3" id="country-construction">
    <el-main class="p-0">
      <el-row style="position:absolute;z-index:200;margin-left:50px;margin-top:15px;">
        <el-col :span="12">
          <div class="theme" style="backgroundColor:#56CD73">已完成</div>
        </el-col>
        <el-col :span="12">
          <div class="theme" style="backgroundColor:#1F9CFF">未完成</div>
        </el-col>
      </el-row>
      <ConutryCommonMap ref="conutryCommonMap"/>
    </el-main>
    <el-aside width="500px" class="ml-3 text-center d-flex flex-column">
      <el-row :gutter="10" class="mx-0">
        <el-col :span="12">
          <el-select class="w-100" v-model="selectArea" placeholder="请选择" @change="cityChange">
            <el-option
              v-for="item in cityOptions"
              :key="item.cityId"
              :label="item.cityName"
              :value="item.cityId"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select class="w-100" v-model="selectType" placeholder="请选择" @change="cityChange">
            <el-option
              v-for="item in typeOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="tableData" border height="400" class="mt-2">
        <el-table-column prop="city_name" label="地市" align="center"></el-table-column>
        <el-table-column prop="area_name" label="区县" align="center"></el-table-column>
        <el-table-column label="完成时间" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jk_sfwc == '1' ">{{scope.row.jk_wcsj}}</div>
            <div v-else>
              <el-button type="text" @click="perssThing(scope.row)">催办</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-2 bg-white pt-3" style="height:300px;">
        <CommonEcharts ref="commonEcharts" titleCharts="县级建库统计"/>
      </div>
    </el-aside>
  </el-container>
</template>
<script>
import ConutryCommonMap from "./ConutryCommonMap";
import axios from "axios";
import CommonEcharts from "./CommonEcharts";
export default {
  name: "countylevelprocessing",
  title: "县级内业处理统计",
  components: { ConutryCommonMap, CommonEcharts },
  data() {
    return {
      cityOptions: [],
      selectArea: null,
      tableData: null,
      provinceId: "",
      isRender: false,
      pieData: [],
      themeData: ["未完成", "已完成"],
      typeOption: [
        {
          id: "",
          name: "全部"
        },
        {
          id: "1",
          name: "已完成县区"
        },
        {
          id: "0",
          name: "未完成县区"
        }
      ],
      selectType: ""
    };
  },
  methods: {
    perssThing(row) {
      let url = this.$api.addNoteByProgress;
      let content = "请尽快上报该项工作的进度";
      let title = "县级建库";
      this.$post(
        url,
        {
          areaIds: row.area_id,
          context: content,
          title: title
        },
        { convert: false }
      ).then(res => {
        this.$message("催办成功");
      });
    },
    cityChange() {
      this.getData();
      let selectName = "";
      this.cityOptions.forEach(item => {
        if (item.cityId == this.selectArea) {
          selectName = item.cityName;
        }
      });
    },
    getData() {
      let surl = this.$api.initdb;
      let cityId = "";
      if (this.provinceId == this.selectArea) {
        cityId = "";
      } else {
        cityId = this.selectArea;
      }
      let type = this.selectType;
      this.$get(surl, {
        cityId: cityId,
        type: type
      })
        .then(res => {
          if (res.data.code === "200") {
            this.tableData = res.data.data;
            this.pieData = [];
            let isComplate = 0;
            this.$nextTick(() => {
              var tData = [];
              this.tableData.forEach(item => {
                if (item.jk_sfwc == 1) {
                  isComplate++;
                }
                tData.push({
                  area_name: item.area_name,
                  status: item.jk_sfwc
                });
              });
              if (this.provinceId == this.selectArea) {
                this.$refs.conutryCommonMap.renderingMap(tData);
              } else {
                this.$refs.conutryCommonMap.createCityPolygon(
                  tData,
                  this.selectArea
                );
              }
              this.pieData.push({
                name: "未完成",
                value: tData.length - isComplate
              });
              this.pieData.push({
                name: "已完成",
                value: isComplate
              });
              this.$refs.commonEcharts.setData(this.pieData, this.themeData);
            });
          } else {
            this.$codeError(res);
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    }
  },
  mounted() {
    this.$get(this.$api.getCityInfo).then(res => {
      if (res.data.code === "200") {
        var result = res.data.data;
        this.cityOptions = [];
        if (this.$store.getters.userType != 3) {
          this.cityOptions.push({
            cityId: result.provinceId,
            cityName: result.provinceName
          });
        }
        this.provinceId = result.provinceId;
        res.data.data.citys.forEach(item => {
          this.cityOptions.push({
            cityId: item.cityId,
            cityName: item.cityName
          });
        });
        this.selectArea = this.cityOptions[0].cityId;
        this.$refs.conutryCommonMap.loadMap().then(res => {
          if (res) {
            this.getData();
          }
        });
      }
    });
  }
};
</script>
<style lang='scss'>
#country-construction {
  .theme {
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    color: white;
  }
}
</style>